<template>
  <span class="bolt">
    <span v-show="num">
      <i class="reduce" @click="handleReduceCartGoods">-</i>
      <i class="shop-num">{{ num }}</i>
    </span>
    <span class="plus" @click="handleAddCartGoods" v-if="plusShow">+</span>
  </span>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    restaurant_id: {
      type: Number,
      default: 0,
    },
    category_id: {
      type: Number,
      default: 0,
    },
    item_id: {
      type: Number,
      default: 0,
    },
    food_id: {
      type: Number,
      default: 0,
    },
    price: {
      type: Number,
      default: 0,
    },
    name: {
      type: String,
      default: "",
    },
    plusShow: {
      type: Boolean,
      default: true,
    },
    packing_fee: {
      type: Number,
      default: 0
    }
  },
  computed: {
    ...mapGetters(["goods"]),
    num() {
      // 处理选规格count
      if (!this.plusShow && JSON.stringify(this.goods).includes(this.food_id)) {
        const item = this.goods[this.restaurant_id][this.category_id][
          this.item_id
        ];
        let count = 0;
        for (const key in item) {
          count += item[key].count;
        }
        return count;
      }

      // 处理普通count
      if (
        JSON.stringify(this.goods).includes(this.food_id) &&
        this.restaurant_id !== 0
      ) {
        return this.goods[this.restaurant_id][this.category_id][this.item_id][
          this.food_id
        ].count;
      }
      return 0;
    },
  },
  methods: {
    handleAddCartGoods() {
      // 对选中商品进行本地存储
      // const buyCart = JSON.parse(localStorage.getItem("buyCart"));
      // const specfoods = index === 1 ? value.specfoods[1] : value.specfoods[0];
      // const food_id = value.specfoods[index]
      //   ? value.specfoods[index].food_id
      //   : false;

      // if (
      //   localStorage
      //     .getItem("buyCart")
      //     .includes(food_id || value.specfoods[0].food_id)
      // ) {
      //   buyCart[value.restaurant_id][value.category_id][value.item_id][
      //     specfoods.food_id
      //   ].count++;

      //   localStorage.setItem("buyCart", JSON.stringify(buyCart));

      //   this.subordinateObj = buyCart[value.restaurant_id];

      //   this.lowestLevelObj =
      //     buyCart[value.restaurant_id][value.category_id][value.item_id];
      // } else {
      //   // 第一次添加

      //   buyCart[value.restaurant_id] = this.subordinateObj;

      //   if (!this.subordinateObj[value.category_id]) {
      //     this.subordinateObj[value.category_id] = {};
      //   }
      //   if (index + 1) {
      //     this.subordinateObj[value.category_id][
      //       value.item_id
      //     ] = this.lowestLevelObj;

      //     this.lowestLevelObj[specfoods.food_id] = {
      //       id: specfoods.food_id,
      //       specs_name: specfoods.specs_name,
      //       name: value.name,
      //       count: 1,
      //     };
      //   } else {
      //     const lowestLevelObj = {};

      //     this.subordinateObj[value.category_id][
      //       value.item_id
      //     ] = lowestLevelObj;
      //     lowestLevelObj[value.specfoods[0].food_id] = {
      //       id: value.specfoods[0].food_id,
      //       name: value.name,
      //       count: 1,
      //     };
      //   }

      //   localStorage.setItem("buyCart", JSON.stringify(buyCart));
      // }

      this.$store.dispatch("buyCart", {
        restaurant_id: this.restaurant_id,
        category_id: this.category_id,
        item_id: this.item_id,
        food_id: this.food_id,
        id: this.food_id,
        name: this.name,
        price: this.price,
        packing_fee: this.packing_fee,
      });

      this.$bus.$emit(
        "handleAddCartGoods",
        this.restaurant_id,
        this.category_id
      );

      this.$bus.$emit("handleGoodsCount", this.restaurant_id, this.category_id);
    },
    handleReduceCartGoods() {
      if (!this.plusShow) {
        this.$toast.handleTipsText("多规格商品只能去购物车删除哦", "routine");
        return;
      }
      this.$store.commit("reduceoneTenthGood", {
        restaurant_id: this.restaurant_id,
        category_id: this.category_id,
        item_id: this.item_id,
        food_id: this.food_id,
      });

      this.$emit("handleReduceCartGoods");
      this.$bus.$emit("handleGoodsCount", this.restaurant_id, this.category_id);
    },
  },
};
</script>
<style lang="less" scoped>
.bolt {
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 20px;
  .reduce,
  .plus {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
  }
  .plus {
    background-color: #3190e8;
    color: #fff;
  }
  .reduce {
    line-height: 12px;
    border: 1px solid #3190e8;
    background-color: #ffffff;
    color: #3190e8;
    vertical-align: middle;
  }
  .shop-num {
    font-style: normal;
    font-size: 18px;
    margin: 0 10px;
  }
}
</style>